<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/Pagination/Index.vue'
import DictTag from '@/components/DictTag/Index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Search, Refresh, Plus, Delete, Edit } from '@element-plus/icons-vue'
import { parseTime } from '@/utils/validate'
import editor from '@/components/Editor/index.vue'

import { noticeAdd, noticeDelete, noticeEdit, getNoticeList } from '@/api/admin/system/notice'
/***queryForm ref */
const queryFormRef = ref<FormInstance>()
/**form ref */
const formRef = ref<FormInstance>()
// 遮罩层
const loading = ref(true)
// 选中数组
const ids = ref([])
// 非单个禁用
const single = ref(true)
// 非多个禁用
const multiple = ref(true)

// 总条数
const total = ref(0)
// 公告表格数据
const noticeList: Ref<never[]> = ref([])

// 弹出层标题
const title = ref('')
// 是否显示弹出层
const open = ref(false)
// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  noticeType: '',
  noticeTitle: '',
  createBy: '',
  status: ''
})
// 表单参数
const form = ref({
  noticeId: undefined,
  noticeTitle: undefined,
  noticeType: undefined,
  noticeContent: undefined,
  status: '0'
})
// 表单校验
const rules = ref({
  noticeTitle: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
  noticeType: [{ required: true, message: '公告类型不能为空', trigger: 'change' }]
})
/** 查询公告列表 */
const getList = () => {
  console.log('查询公告列表', queryParams)
  loading.value = true
  getNoticeList(queryParams.value).then((response: any) => {
    console.log('通知公告', response)
    noticeList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}
// 取消按钮
const cancel = () => {
  open.value = false
  reset()
}
// 表单重置
const reset = () => {
  form.value = {
    noticeId: undefined,
    noticeTitle: undefined,
    noticeType: undefined,
    noticeContent: undefined,
    status: '0'
  }

  if (formRef.value) {
    formRef?.value?.resetFields()
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef?.value?.resetFields()
  handleQuery()
}
// 多选框选中数据
const handleSelectionChange = (selection: any) => {
  ids.value = selection.map((item: any) => item.noticeId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
/** 新增按钮操作 */
const handleAdd = () => {
  reset()
  open.value = true
  title.value = '添加公告'
}
/**修改按钮操作 */
const handleUpdate = (row: any) => {
  // reset()
  // const noticeId = row.noticeId || ids.value
  //  getNotice(noticeId).then(response => {
  // form.value = response.data;
  open.value = true
  title.value = '修改公告'
  form.value = {
    noticeId: row.noticeId,
    noticeTitle: row.noticeTitle,
    noticeType: row.noticeType,
    status: row.status,
    noticeContent: row.noticeContent
  }
  //  });
}
/** 提交按钮 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formRef?.value?.validate((valid) => {
    if (valid) {
      if (!form.value.noticeId) {
        // 新增
        // 新增
        noticeAdd(form.value).then((response: any) => {
          open.value = false
          ElMessage.success('新增成功')
          getList()
        })
      } else {
        noticeEdit(form.value).then((response: any) => {
          open.value = false
          ElMessage.success('修改成功')
          getList()
        })
      }
    }
  })
}
/** 删除按钮操作 */
const handleDelete = (row: any) => {
  const noticeIds = row.noticeId || ids.value
  ElMessageBox.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(function () {
      return noticeDelete(noticeIds)
    })
    .then(() => {
      getList()
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}

const sys_notice_status = ref([
  { label: '正常', value: '0', elTagType: 'primary' },
  { label: '关闭', value: '1', elTagType: 'danger' }
])
const sys_notice_type = ref([
  { label: '通知', value: '1', elTagType: 'warning' },
  { label: '公告', value: '2', elTagType: 'success' }
])
getList()
</script>

<template>
  <div class="notice">
    <!-- 查询 -->
    <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="公告标题" prop="noticeTitle">
        <el-input
          v-model="queryParams.noticeTitle"
          placeholder="请输入公告标题"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="操作人员" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入操作人员"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="类型" prop="noticeType">
        <el-select v-model="queryParams.noticeType" placeholder="公告类型" clearable>
          <el-option
            v-for="dict in sys_notice_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 按钮组 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:notice:add']"
          type="primary"
          plain
          :icon="Plus"
          @click="handleAdd"
          >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:notice:remove']"
          type="danger"
          plain
          :icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col>
    </el-row>
    <!-- 列表数据 -->
    <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="noticeId" width="100" />
      <el-table-column
        label="公告标题"
        align="center"
        prop="noticeTitle"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
        <template #default="scope">
          <dict-tag :options="sys_notice_type" :value="scope.row.noticeType" />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" width="100">
        <template #default="scope">
          <dict-tag :options="sys_notice_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="创建者" align="center" prop="createBy" width="100" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="150"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            v-hasPermi="['system:notice:edit']"
            type="primary"
            link
            :icon="Edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            v-hasPermi="['system:notice:remove']"
            type="primary"
            link
            :icon="Delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
    <!-- 添加或修改公告对话框 -->
    <el-dialog v-model="open" :title="title" width="780px" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="公告标题" prop="noticeTitle">
              <el-input v-model="form.noticeTitle" placeholder="请输入公告标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告类型" prop="noticeType">
              <el-select v-model="form.noticeType" placeholder="请选择">
                <el-option
                  v-for="dict in sys_notice_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in sys_notice_status" :key="dict.value" :label="dict.value">{{
                  dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容">
              <!-- todo 这个地方可以换成富文本框 -->
              <!-- <el-input
                v-model="form.noticeContent"
                :rows="2"
                type="textarea"
                placeholder="请输入通知内容"
              /> -->
              <editor v-model="form.noticeContent" height="140" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm(formRef)">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss"></style>
